<template>
  <div class="app-container">
    <el-card>
      <div class="filter-container">
        <el-input
          v-model="documentUrl"
          placeholder="请输入Word文档URL"
          style="width: 300px; margin-right: 10px;"
        />
        <el-button size="small" type="primary" @click="loadDocument">加载文档</el-button>
        <el-button size="small" type="success" @click="handleSave">保存文档</el-button>
      </div>

      <div class="doc-container">
        <!-- 左侧编辑区域 -->
        <div class="editor-section">
          <div class="editor-header">
            <span>文档编辑</span>
            <el-button-group>
              <el-button size="small" type="primary" @click="handleSave">保存</el-button>
              <el-button size="small" @click="handlePreview">预览</el-button>
            </el-button-group>
          </div>
          <div class="editor-content">
            <editor
              api-key="q0067g07wq9mo8ykgah7cngwkffdyi4elqnxkw9ztz0wq6jr"
              :init="editorInit"
              v-model="content"
              @input="handleEditorChange"
            />
          </div>
        </div>

        <!-- 右侧预览区域 -->
        <div class="preview-section">
          <div class="preview-header">
            <span>文档预览</span>
            <el-button size="small" @click="handleDownload">下载</el-button>
          </div>
          <div class="preview-content" v-loading="previewLoading">
            <div v-if="previewHtml" v-html="previewHtml" class="preview-html"></div>
            <div v-else class="empty-preview">
              <i class="el-icon-document"></i>
              <p>请先加载文档</p>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import Editor from '@tinymce/tinymce-vue'
import axios from 'axios'
import mammoth from 'mammoth'

export default {
  name: 'Attr',
  components: {
    Editor
  },
  data() {
    return {
      currentFileUrl: '', // 当前预览的文件URL
      content: '', // 编辑内容
      documentUrl: 'http://110.40.176.62/static/linux.docx', // 文档URL
      previewHtml: '', // 预览HTML内容
      previewLoading: false, // 预览加载状态
      editorInit: {
        height: '100%',
        language: 'zh_CN',
        menubar: true,
        plugins: [
          'advlist autolink lists link image charmap print preview anchor',
          'searchreplace visualblocks code fullscreen',
          'insertdatetime media table paste code help wordcount'
        ],
        toolbar: [
          'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify |',
          'bullist numlist outdent indent | removeformat | help'
        ],
        content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
      }
    }
  },
  methods: {
    // 加载文档
    async loadDocument() {
      try {
        this.previewLoading = true;
        // 清空当前内容
        this.content = '';
        this.previewHtml = '';
        
        const response = await axios.get(this.documentUrl, {
          responseType: 'arraybuffer'
        });
        
        // 使用 mammoth 将 Word 文档转换为 HTML
        const result = await mammoth.convertToHtml({ arrayBuffer: response.data });
        this.content = result.value;
        this.previewHtml = result.value;
        this.currentFileUrl = this.documentUrl;
        
        this.$message.success('文档加载成功');
      } catch (error) {
        this.$message.error('文档加载失败');
        console.error('加载文档失败:', error);
      } finally {
        this.previewLoading = false;
      }
    },

    // 编辑器内容变化处理
    handleEditorChange(content) {
      this.previewHtml = content;
    },

    // 保存文档
    async handleSave() {
      try {
        // 这里添加保存文档的逻辑
        // 实际项目中需要调用后端接口
        this.$message.success('文档保存成功');
      } catch (error) {
        this.$message.error('文档保存失败');
        console.error('保存文档失败:', error);
      }
    },

    // 预览文档
    handlePreview() {
      if (this.content) {
        this.previewHtml = this.content;
        this.$message.success('正在预览文档');
      } else {
        this.$message.warning('请先加载文档');
      }
    },

    // 下载文档
    handleDownload() {
      if (this.currentFileUrl) {
        window.open(this.currentFileUrl);
      } else {
        this.$message.warning('没有可下载的文档');
      }
    }
  },
  watch: {
    // 监听文档URL变化
    documentUrl: {
      handler(newUrl) {
        if (newUrl && newUrl !== this.currentFileUrl) {
          this.loadDocument();
        }
      },
      immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>
.doc-container {
  display: flex;
  gap: 20px;
  margin-top: 20px;
  height: calc(100vh - 200px);
}

.editor-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  overflow: hidden;
}

.preview-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  overflow: hidden;
}

.editor-header,
.preview-header {
  padding: 10px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #dcdfe6;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.editor-content {
  flex: 1;
  padding: 20px;
  background-color: #fff;
  overflow-y: auto;
}

.preview-content {
  flex: 1;
  padding: 20px;
  background-color: #fff;
  overflow-y: auto;
}

.preview-html {
  font-family: "Microsoft YaHei", sans-serif;
  line-height: 1.6;

  h1, h2, h3, h4, h5, h6 {
    margin: 1em 0 0.5em;
  }

  p {
    margin: 0.5em 0;
  }

  ul, ol {
    margin: 0.5em 0;
    padding-left: 2em;
  }

  table {
    border-collapse: collapse;
    width: 100%;
    margin: 0.5em 0;

    th, td {
      border: 1px solid #dcdfe6;
      padding: 8px;
    }
  }
}

.empty-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #909399;

  i {
    font-size: 48px;
    margin-bottom: 10px;
  }
}
</style>
